export default function useEchartMapOption(mapName) {
  const compId = mapName;
  var center = {
    南京市: [118.767413, 32.041544],
    无锡市: [120.301663, 31.574729],
    徐州市: [117.184811, 34.261792],
    常州市: [119.946973, 31.772752],
    苏州市: [120.619585, 31.299379],
    南通市: [120.864608, 32.016212],
    连云港市: [119.178821, 34.600018],
    淮安市: [119.021265, 33.597506],
    盐城市: [120.139998, 33.377631],
    扬州市: [119.421003, 32.393159],
    镇江市: [119.452753, 32.204402],
    泰州市: [119.915176, 32.484882],
    宿迁市: [118.275162, 33.963008],
  };

  // 定义颜色数组，每个元素对应一个区块的颜色
  var blockColors = [
    "rgba(255,0,0,0.8)",
    "rgba(0,255,0,0.8)",
    "rgba(0,0,255,0.8)",
  ];

  // 定义当前颜色索引
  var currentIndex = 0;

  function getOption(setting) {
    const { zoom, roam } = setting;
    const option = {
      background: "transparent",
      tooltip: {
        trigger: "item",
      },
      geo3D: {
        show: true,
        map: compId,
        top: -120,
        viewControl: {
          beta: 0,
          alpha: 40,
          distance: 190,
          panMouseButton: "left",
          rotateMouseButton: "right",
        },
        realisticMaterial: {
          detailTexture:
            "http://192.168.100.222:9050/webapp/data/static/comp/map/detail.webp",
          textureTiling: 1,
          roughness: 1,
          metalness: 0,
          roughnessAdjust: 0,
        },
        light: {
          main: {
            color: "rgba(255,255,255,1)",
            intensity: 1.2,
            shadow: true,
            shadowQuality: "ultra",
          },
          ambient: {
            color: "rgba(0,0,0,1)",
            intensity: 0.1,
          },
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: "rgba(255,255,255,1)",
          shadowBlur: 150,
          opcity: 1,
        },
        shading: "realistic",
        label: {
          show: true,
          fontSize: 14,
          color: "rgba(249,252,255,1)",
          fontWeight: 600,
          fontFamily: "Courier New",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            color: "rgba(249,252,255,1)",
            fontWeight: 600,
          },
          itemStyle: {
            borderWidth: 1,
            borderColor: "rgba(79,220,247,1)",
          },
        },
        groundPlane: false,
        zlevel: -1,
      },
      series: [
        {
          type: "map3D",
          map: compId,
          itemStyle: {
            color: [1, 1, 1, 0],
          },
          emphasis: {
            itemStyle: {
              color: [1, 1, 1, 0],
            },
          },
          viewControl: {
            beta: 45,
            alpha: 45,
          },
        },
      ],
    };

    return option;
  }
  function updateOption() {}
  // function updateOption({ myChart, option }) {
  //   // // 更新颜色函数
  //   const areaColor = ["天河区", "荔湾区", "黄埔区"];
  //   function updateColors(name) {
  //     option.geo3D.regions = [
  //       {
  //         name,
  //         itemStyle: {
  //           color: "green",
  //         },
  //       },
  //     ];
  //     console.log("option", option);

  //     myChart.setOption(option);
  //     // currentIndex = (currentIndex + 1) % blockColors.length;
  //     // option.series[0].data[0].itemStyle.areaColor = blockColors[currentIndex];
  //   }

  //   // // 每隔一段时间更新一次颜色
  //   let n = 0;
  //   // updateColors(areaColor[n]);
  //   setInterval(() => {
  //     if (n === areaColor.length) {
  //       n = 0;
  //     }
  //     console.log("n", n, areaColor[n])
  //     updateColors(areaColor[n]);
  //     n++;
  //   }, 2000);
  // }

  return {
    getOption,
    // updateOption,
  };
}
